<template>
  <div class="container">
    <p>
      备注：必须正确选择"课程"对应的"课程性质"，否则无法准确计算出课程成绩得分
    </p>
    <el-button type="primary" @click="add_items" class="add_grade"
      >添加成绩</el-button
    >
    <el-table :data="grade_table" border style="width: 50%">
      <el-table-column prop="course_name" label="课程" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.course_name" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="credit" label="学分" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.credit" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="成绩" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.grade" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="nature" label="课程性质" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.nature" placeholder="请选择">
            <el-option
              v-for="item in nature_list"
              :key="item.value"
              :label="item.value + '-' + item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delete_item(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Grade",
  data() {
    return {
      // 性质
      nature_list: [
        { name: "实践课", value: "01" },
        { name: "公共必修课", value: "02" },
        { name: "专业基础课", value: "03" },
        { name: "专业核心课", value: "04" },
        { name: "专业选修课", value: "05" },
        { name: "公共选修课", value: "06" },
      ],
      grade_table: [],
    };
  },
  methods: {
    add_items() {
      this.grade_table.push({
        course_name: "",
        nature: "",
        grade: "",
        credit: "",
      });
    },
    delete_item(index, scope) {
      this.grade_table.splice(index, 1);
    },
  },
  mounted() {},
  watch: {
    grade_table(n, o) {
      console.log(n);
      console.log(o);
      this.$emit("listen_grade", this.grade_table);
    },
  },
};
</script>

<style>
.add_grade{
  margin: 10px 0;
}
</style>
